<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>福利页</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <style>
        .welfare_top_left {
            height: 100%;
            width: 50px;
        }

        .welfare_top_rigty {
            float: right;
            height: 100%;
            width: 50px;
        }

        .welfare_context {
            height: 500px;
            background-color: #fff;
            overflow-y: scroll;
        }

        .welfare_bottom {
            display: -webkit-box;
            box-orien: horizontal;
        }

        .welfare_bottom1 {
            -webkit-box-flex: 1.0;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="welfare_top">
            <span class="welfare_top_left">
          </span>
            <span class="welfare_top_rigty">
          </span>
        </div>
        <div class="welfare_context">
        </div>
        <div class="welfare_bottom">
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
    var bottomView; //底部View的个数
    var topHeight; //顶部的高度
    var bottomHeight; //底部的高度
    var middleHeight; //中间的高度
    var phoneSystem;
    var mType;
    var clickState = true; //马上申请的点击状态
    apiready = function() {
        phoneSystem = api.systemType;
        api.setStatusBarStyle({
          style: 'dark'
        });

        getInitDatas();
        var topLeft = document.getElementsByClassName('welfare_top_left')[0];
        var topRigty = document.getElementsByClassName('welfare_top_rigty')[0];
        var top = document.getElementsByClassName('welfare_top')[0];
        var bottom = document.getElementsByClassName('welfare_bottom')[0];
        var contextDiv = document.getElementsByClassName('welfare_context')[0];
        var chinaCreditCard = document.getElementsByClassName('welfare_context7')[0];

        if (topHeight === 0) {
            top.style.display = "none";
        } else {
            top.style.height = topHeight + 'px';
        }
        if (bottomHeight === 0) {
            bottom.style.display = "none";
        } else {
            bottom.style.height = bottomHeight + 'px';
        }
        middleHeight = parseInt(api.winHeight) - parseInt(topHeight) - parseInt(bottomHeight);
        console.log('.........api.winHeight.....middleHeight...' + middleHeight);
        $api.setStorage('middleHeight', middleHeight);
        contextDiv.style.height = middleHeight + 'px';
        topLeft.onclick = function() {
            onClickMsg('top', 'topLeft');
        };
        topRigty.onclick = function() {
            onClickMsg('top', 'topRigty');
        };

        for (var i = 0; i < parseInt(bottomView); i++) {
            console.log('.......i.....' + i);
            var div = document.createElement('div');
            div.setAttribute('style', '-webkit-box-flex:1.0');
            bottom.appendChild(div);
            (function(Index) {
                div.addEventListener('click', function(e) {
                    onClickMsg('bottom', Index + '');
                }, false);
            })(i);
        }
        if(mType == 1){
            setFrame('welfareMainFrame','./welfare_list.html');
           // setFrame('welfareMainFrame','./welfareMainFrame.html');
        }else if(mType == 2){
            setFrame('map_frame','./map_frame.html');
        }
        api.addEventListener({
            name: 'keyback'
        }, function(ret, err) {
          console.log('.........用户按了系统返回键.........');
          api.sendEvent({
              name: 'welfareMainFrame',
              extra: {
               type: 1 ,
              }
          });
        });
    };

    //给原生发送消失
    function onClickMsg(type,msg) {
        api.sendEvent({
            name: 'APICloud4Message',
            extra: {
                msg: msg,
                type: type
            }
        });
    }

    //打开Frame
    function setFrame(name,url) {
        api.openFrame({
            name: name,
            url: url,
            rect: {
                x: 0,
                y: topHeight,
                w: api.winWidth,
                h: middleHeight
            },
            pageParam: {
                topHeight: topHeight,
                middleHeight: middleHeight,
            },
            bounces: false,
            bgColor: 'rgba(0,0,0,0)',
            vScrollBarEnabled: true,
            hScrollBarEnabled: true,
            progress: {
                type: 'page',
                color: '#f52929',
            }
        });
    }

    //获取app 传过来的数据
    function getInitDatas() {
        var appdat1;
        if ('android' === phoneSystem) {
            appdat1 = api.appParam;
            console.log('.........appdat1......' + appdat1);
            appdat1 = JSON.parse(appdat1);
        } else if ('ios' === phoneSystem) {
            appdat1 = api.pageParam;
            console.log('.........appdat1......' + appdat1);
        }

        topHeight = appdat1.topHeight;
        bottomHeight = appdat1.bottomHeight;
        bottomView = appdat1.bottomView;
        mType = appdat1.type;
        $api.setStorage('topHeight', topHeight);

          $api.setStorage(common.appKey.siteAreaid,appdat1.siteAreaid);
          $api.setStorage(common.appKey.pattern,appdat1.pattern);
          $api.setStorage(common.appKey.userId,appdat1.userId);
          $api.setStorage(common.appKey.userToken,appdat1.userToken);
          $api.setStorage(common.appKey.apMac,appdat1.apMac);
          var fwq = appdat1.appFWQ;
          $api.setStorage(common.appKey.appServer,fwq);

    }
</script>

</html>
